<template>
  <view class="file-report bg-white px-4 box-border min-h-[100vh]">
    <view>
      <up-form
        labelPosition="left"
        :model="form"
        :rules="rules"
        ref="uForm"
        labelWidth="75"
      >
        <up-form-item
          label="开始时间"
          borderBottom
          required
          prop="reportStartTime"
          @click="showStartTime = true"
        >
          <up-input
            v-model="form.reportStartTime"
            disabled
            disabledColor="#ffffff"
            placeholder="请选择"
            border="none"
            color="#000000"
            inputAlign="right"
            placeholderStyle="{color: '#707070'}"
          ></up-input>
          <template #right>
            <up-icon name="arrow-right" color="#000000"></up-icon>
          </template>
        </up-form-item>
        <up-form-item
          label="结束时间"
          borderBottom
          required
          prop="reportEndTime"
          @click="showEndTime = true"
        >
          <up-input
            v-model="form.reportEndTime"
            disabled
            disabledColor="#ffffff"
            placeholder="请选择"
            border="none"
            color="#000000"
            inputAlign="right"
            placeholderStyle="{color: '#707070'}"
          ></up-input>
          <template #right>
            <up-icon name="arrow-right" color="#000000"></up-icon>
          </template>
        </up-form-item>
        <view class="evaluate-content">
          <up-form-item label="报备内容" required prop="reportContent">
            <up-textarea
              v-model="form.reportContent"
              placeholder="可输入100字以内的报备内容"
              count
              height="180"
              :maxlength="100"
            ></up-textarea>
          </up-form-item>
        </view>
      </up-form>
    </view>
    <view class="btm-btn" style="width: calc(100% - 64rpx)" @click="onsubmit">
      <button class="btn-0189FE h-[83rpx] leading-[83rpx] text-[33rpx]">
        提 交
      </button>
    </view>
    <up-datetime-picker
      :show="showStartTime"
      v-model="value1"
      mode="datetime"
      closeOnClickOverlay
      @confirm="selectStartTime"
      @cancel="showStartTime = false"
      @close="showStartTime = false"
    ></up-datetime-picker>
    <up-datetime-picker
      :show="showEndTime"
      v-model="value2"
      mode="datetime"
      closeOnClickOverlay
      @confirm="selectEndTime"
      @cancel="showEndTime = false"
      @close="showEndTime = false"
    ></up-datetime-picker>
    <up-toast ref="uToastRef"></up-toast>
  </view>
</template>
<script setup lang="ts">
import dayjs from "dayjs";
import { policeReport } from "@/api/police/clock";
import { useUserInfoStore } from "@/stores/userInfo";
const userInfoStore = useUserInfoStore();

const showStartTime = ref(false);
const showEndTime = ref(false);
const formData = reactive({
  value1: Date.now(),
  value2: Date.now(),
  form: {
    reportStartTime: "",
    reportEndTime: "",
    policeUserId: userInfoStore.userInfo.userId,
    reportContent: undefined,
  },
  rules: {
    reportStartTime: {
      type: "string",
      required: true,
      message: "请选择开始时间",
      trigger: ["blur", "change"],
    },
    reportEndTime: {
      type: "string",
      required: true,
      message: "请选择结束时间",
      trigger: ["blur", "change"],
    },
    reportContent: {
      type: "string",
      required: true,
      message: "请填写报备内容",
      trigger: ["blur", "change"],
    },
  },
});
const { value1, value2, form, rules } = toRefs(formData);
const uForm = <any>ref(null);
const uToastRef = <any>ref(null);

const selectStartTime = (item: any) => {
  showStartTime.value = false;
  form.value.reportStartTime = dayjs(item.value).format("YYYY-MM-DD HH:mm:ss");
};
const selectEndTime = (item: any) => {
  showEndTime.value = false;
  form.value.reportEndTime = dayjs(item.value).format("YYYY-MM-DD HH:mm:ss");
};
const onsubmit = () => {
  uForm.value
    .validate()
    .then((res: any) => {
      console.log(form.value);
      policeReport(form.value)
        .then((res) => {
          uToastRef.value.show({
            type: "success",
            message: "提交成功",
          });
          let timer = setTimeout(() => {
            uni.navigateBack({
              delta: 1,
            });
            clearTimeout(timer);
          }, 1500);
        })
        .catch((err) => {
          uToastRef.value.show({
            type: "error",
            message: err,
          });
        });
    })
    .catch((error: any) => {});
};
onReady(() => {
  uForm.value.setRules(rules.value);
});
</script>

<style lang="scss" scoped>
.file-report {
  .evaluate-content {
    ::v-deep .u-form-item__body {
      flex-direction: column !important;
    }
    ::v-deep .u-form-item__body__left {
      margin-bottom: 24rpx !important;
    }
  }
  .image-list {
    ::v-deep .u-upload__wrap__preview__image {
      width: 150rpx !important;
      height: 150rpx !important;
    }
  }
  .bottom-line {
    width: 100%;
    border-bottom: 1rpx solid #bbbbbb;
  }
}
</style>
